import React, {Component} from 'react'
import {View, Text, StyleSheet, Alert, TouchableOpacity, Image,ImageBackground} from 'react-native'
import {logout} from '../../redux/actions/user'
import {connect} from 'react-redux'
import Icon from 'react-native-vector-icons/Ionicons'
import styles,{BLUE} from '../../config/styles'
import CropImagePicker from 'react-native-image-crop-picker';
var ImagePicker = require('react-native-image-picker')
import {Aws3UploadApi,saveUserHeader} from '../../config/api'
import getUserHeaderImg from '../../helpers/infomation'
import LinearGradient from 'react-native-linear-gradient';


class PersonalIndex extends Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: '个人中心',
            header:null
        }
    }
    constructor (props) {
        super(props)
        this.state = {
            avatarSource:null,
            ImageSource:getUserHeaderImg(props.user.user)
        }
    }


    componentWillMount() {
        const {user} = this.props.user
    }

    _get_name = () => {
        let date = new Date()
        let name = date.getTime().toString()
        name = name.substr(name.length - 6, 6)
        return name
    }

    _openPicker = ()=>{
        const options = {
            title: '选择照片',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '相机',
            chooseFromLibraryButtonTitle: '从相册选择',
             quality: 1.0,
             cropping: true,
             storageOptions: {
               skipBackup: true
             }
        };

        ImagePicker.showImagePicker(options, (response) => {
            if (response.didCancel) {
                console.log('User cancelled photo picker');
            }
            else if (response.error) {
                console.log('ImagePicker Error: ', response.error);
            }
            else if (response.customButton) {
                console.log('User tapped custom button: ', response.customButton);
            }
            else {
                let source = { uri: response.uri };
                CropImagePicker.openCropper({
                    path: response.uri,
                    width: 300,
                    height: 300,
                }).then(image =>{
                    let name = this._get_name()
                    Aws3UploadApi(`${name}.jpeg`, image.path, 'image/jpeg').then((result) => {
                        if(result.status==200){
                            saveUserHeader(result.awsPath).then((data)=>{
                                this.setState({
                                    ImageSource:{uri: result.awsPath}
                                })
                            })
                        }
                    })
                })
                this.setState({
                    avatarSource: source
                });
            }
        });
    }


    render () {
        const {user} = this.props.user
        const {navigation} = this.props
        console.log('user', user)
        return (
            <View style={styles.personal_container}>
                <ImageBackground source={require('../../assets/images/bgimg.jpeg')} style={styles.personal_img_container}>
                    {/*<View style={styles.personal_img_inner_container}>
                        <Image source={require('../../assets/images/qx_bg.png')} />
                    </View>*/}
                    <Image  source={require('../../assets/images/user-bg-meng.png')} style={{height:70,justifyContent: 'flex-end',position:'absolute'}}/>
                   
                </ImageBackground>
                <View style={{alignItems: 'flex-start',justifyContent: 'flex-start'}}>
                        <TouchableOpacity onPress={this._openPicker} style={styles.personal_avatar}>
                            <Image source={this.state.ImageSource} style={{height: 80, width: 80, borderWidth:2,borderColor:'#fff',borderRadius: 5, position: 'relative', zIndex: 999}}/>
                            <View style={{backgroundColor: 'rgba(0,0,0,0)',marginLeft:15}}>
                                <Text style={{fontSize: 28,color:'#fff'}}>{user.name}</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                <View style={{flex: 1,marginTop:60}}>
                    {user.is_leader ?
                        <TouchableOpacity
                            style={styles.personal_label_container}
                            onPress={() => this.props.navigation.navigate('swich_role')}
                        >
                            <View style={{flex: 1, flexDirection: 'row'}}>
                                <View style={{justifyContent: 'center', paddingRight: 8}}>
                                    <Icon name={'ios-person-add-outline'} color={BLUE} size={20} />
                                </View>
                                <View style={{justifyContent: 'center', flex: 1}}>
                                    <Text>身份切换</Text>
                                </View>
                                <Icon name={'ios-arrow-forward-outline'} />
                            </View>
                        </TouchableOpacity>:null
                    }
                    <TouchableOpacity 
                        style={styles.personal_label_container}
                        onPress={() => this.props.navigation.navigate('feedback')}
                    >
                         <View style={{flex: 1, flexDirection: 'row'}}>
                            <View style={{justifyContent: 'center', paddingRight: 5}}>
                                <Icon name={'ios-alert-outline'} color={BLUE} size={20} />
                            </View>
                            <View style={{justifyContent: 'center', flex: 1}}>
                                <Text>意见反馈</Text>
                            </View>
                            <Icon name={'ios-arrow-forward-outline'} />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.personal_label_container}>
                        <View style={{flex: 1, flexDirection: 'row'}}>
                            <View style={{justifyContent: 'center', paddingRight: 5}}>
                                <Icon name={'ios-chatbubbles-outline'} color={BLUE} size={20} />
                            </View>
                            <View style={{justifyContent: 'center', flex: 1}}>
                                <Text>版本更新</Text>
                            </View>
                            <Icon name={'ios-arrow-forward-outline'} />
                        </View>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.as_large_button, styles.background_blue, {marginTop: 10}]}
                        onPress={() => {
                            Alert.alert('登出确认', '确定要退出当前账号吗？',[
                                {text: '取消', onPress: () => {}},
                                {text: '确定', onPress: () => {this.props.dispatch(logout())}}
                            ])
                            }
                        }      
                    >
                        <Text style={{color: 'white'}}>退出登录</Text>
                    </TouchableOpacity>
                </View>
               
            </View>
        )
    }
}


const mapStateToProps = (state) => {
    return {
        user: state.user
    }
}

export default connect(mapStateToProps)(PersonalIndex)